<template>
  <div class="container">
    <div class="hidden-sm-and-down top-line">
      <div class="logobox">
        <img class="logo" :src="userInfo.projectLogo" alt="" />
        <span>康复治疗技术专业教学资源库</span>
      </div>
      <div class="rightuser">
        <div class="avatar">
          <img
            data-v-1a18c260=""
            src="https://cdn-zyk.icve.com.cn/static/img/header.3d35fe93.png"
            oncontextmenu="return false;"
            class="user_avatar"
          />
        </div>
        <span>欢迎来到资源库~</span>
      </div>
    </div>
  </div>
  <div class="menudiv">
    <el-menu
      ref="menu"
      style="position: sticky; top: 0"
      :default-active="activePath"
      class="el-menu-demo"
      mode="horizontal"
      router
      :ellipsis="false"
      menu-trigger="click"
    >
      <div class="menu">
        <div class="hidden-xs-only" style="display: flex; align-items: center">
          <el-menu-item index="/site/home">
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/site/major">
            <span> 专业园地</span>
          </el-menu-item>
          <el-menu-item index="/site/course">
            <span> 课程中心</span></el-menu-item
          >
          <el-menu-item index="/site/peixun"
            ><span> 培训中心</span></el-menu-item
          >
          <el-menu-item index="/site/sucai"
            ><span> 素材中心</span></el-menu-item
          >
          <el-menu-item index="/site/news"><span> 新闻中心</span></el-menu-item>
        </div>

        <div id="searchbox" v-if="showSearch">
          <el-input
            v-model="searchValue"
            placeholder="请输入您想搜索的关键词"
            :prefix-icon="Search"
            class="elinput"
            clearable
          />
          <div class="button" @click="searchHandle">搜索</div>
        </div>
      </div>
    </el-menu>
  </div>

  <RouterView />
  <div class="footer">
    <div class="footerone">
      <div class="ul">
        <p v-for="(item, index) in courseData" @click="gotoDetail(item)">
          {{ item.courseName }}
        </p>
      </div>
      <div>
        <div class="logodivf">
          <div class="flogo">
            <img src="" alt="" />
          </div>
          <span>康复治疗技术专业教学资源库</span>
        </div>
        <p class="ftext">主持单位: 郑州铁路职业技术学院</p>
        <p class="ftext">
          参建单位:郑州大学第三附属医院，郑州大学第五附属医院，黄河中心医院
        </p>
      </div>
    </div>
    <el-row
      justify="center"
      style="
        align-items: center;
        padding: 20px 0;
        background-color: #2c2c2c;
        color: #fff;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
      "
    >
      <el-col style="text-align: center" :span="12">
        <p>Copyright © 2023 All Rights Reserved.</p>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {
  Grid,
  Service,
  ChatSquare,
  Message,
  Location,
  Search,
} from '@element-plus/icons-vue'
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import { getUserInfo, getCourse } from '@/api/api.js'
import { eventBus } from '@/utils/eventBus.js'
let menu = ref(null)
let top = ref()
let userInfo = ref({})
let courseData = ref([])
const searchValue = ref('')
const route = useRoute()
const activePath = computed(() => {
  return route.meta.activePath ? route.meta.activePath : route.path
})

watch(
  () => route.path,
  (newVal, oldVal) => {
    searchValue.value = ''
  }
)

const showSearch = computed(() => {
  return route.path != '/site/home'
})
onMounted(() => {
  getUserInfo({ shortUrl: 'zztlkfzljs' }).then((res) => {
    userInfo.value = res.data.projectGroupInfo
  })
  getCourse({
    projectId: '2utrackwo41egqxjetrgja',
    coursetype: 1,
    pagesize: 6,
  }).then((res) => {
    courseData.value = JSON.parse(res.list).obj
  })
})
const gotoDetail = (item) => {
  window.open(`https://zyk.icve.com.cn/courseDetailed?id=${item.id}`)
}
onUnmounted(() => {})
watch(
  () => top.value,
  (pev, old) => {
    if (pev == 0) {
      menu.value.$el.style.zIndex = 9999
    }
  }
)
let pathToHandle = {
  '/site/major': 'searchHandleMajor',
  '/site/course': 'searchHandleCourse',
  '/site/peixun': 'searchHandlePeixun',
  '/site/sucai': 'searchHandleSucai',
  '/site/news': 'searchHandleNews',
}
function searchHandle() {
  eventBus.$emit(pathToHandle[route.path], searchValue.value)
}
</script>

<style lang="scss" scoped>
.button {
  width: 46px;
  height: 28px;
  background: #f09d20;
  border-radius: 99px 99px 99px 99px;
  text-align: center;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 12px;
  color: #2e2f33;
  line-height: 28px;
  cursor: pointer;
}
#searchbox {
  position: absolute;
  right: 0;
  top: 12px;
  width: 244px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px 99px 99px 99px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elinput {
  width: 190px;
  :deep(.el-input__wrapper) {
    background: none !important ;
    box-shadow: none !important;
    padding-top: 0;
    padding-bottom: 0;
    .el-input__prefix,
    .el-input__clear {
      color: #fff;
    }
    .el-input__inner {
      color: #fff;
      font-size: 12px;
      height: 32px;
      line-height: 32px;
    }
    .el-input__inner::placeholder {
      color: #fff;
    }
  }
}
.logobox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  height: 42px;
  margin-right: 16px;
}
.logodivf {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  span {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    line-height: 30px;
  }
}
.flogo {
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  margin-right: 10px;
}
.ftext {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  line-height: 18px;
  margin-bottom: 12px;
}
.ul {
  display: flex;
  flex-wrap: wrap;
  width: 480px;
  margin-right: 90px;
  p {
    margin-right: 60px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    line-height: 18px;
    margin-bottom: 16px;
    cursor: pointer;
    width: 100px;
  }
}
.footerone {
  height: 170px;
  width: 1280px;
  margin: 0 auto;
  padding-top: 30px;
  box-sizing: border-box;
  display: flex;
}
.menudiv {
  background: #178fd1;
  position: relative;
}
.el-menu {
  background: #178fd1;
  border-bottom: none;
  width: 1280px;
  margin: 0 auto;
}
.el-menu-item {
  color: #fff;
  padding: 0 20px;
  margin-right: 80px;
}
.el-menu-item:last-child {
  margin-right: 0 !important;
}
.is-active {
  color: #fff !important;
}
.is-active span::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 3px;
  background: #f09d20;
  left: 0;
  bottom: 12px;
}
.el-menu-item:hover {
  text-decoration: underline;
  text-decoration-color: #f09d20; /* 设置下划线颜色 */
  text-decoration-thickness: 3px; /* 设置下划线粗细 */
  background: none !important;
  color: #fff !important;
  text-underline-offset: 8px;
}
.el-menu-item:focus {
  background: none !important;
}
.rightuser {
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #eee;
  margin-right: 60px;
  img {
    width: 100%;
    height: 100%;
  }
}
.logodiv {
  width: 52px;
  height: 52px;
  background: #1999e0;
  border-radius: 4px 4px 4px 4px;
}
.top-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  height: 100px;
  width: 1280px;
  margin: 0 auto;
}
.container {
  font-weight: 600;
}

.menu {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.footer {
  background-color: #2c2c2c;
  position: relative;
}

.single-widget-parent {
  display: flex;
  justify-content: center;
}
.single-widget {
  width: 200px;
  margin: 2rem 0;
}

.single-widget h3 {
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  color: #606060;
  margin-bottom: 35px;
  position: relative;
}

.single-widget h3::after {
  background: #606060 none repeat scroll 0 0;
  bottom: -10px;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  width: 57px;
}

.single-widget h3::before {
  background: #606060 none repeat scroll 0 0;
  bottom: -13px;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  width: 45px;
}
</style>
